import QtQuick
import QtQuick.Layouts
import Gui.Components
import "PlayerBar"

Rectangle {
    id: root
    MProgressBar {
        id: progressSlider
        enabled: playBarViewModel.hasMusic
        anchors.top: parent.top
        width: parent.width
        value: playBarViewModel.playPosition
        onClicked: val => {
            playBarViewModel.setPlayPosition(val);
        }
        MToolTip {
            id: _lyricToolTip
            visible: !!text
        }

        onHoveredPos: function (hovered, pos) {
            if (hovered) {
                const lineLyric = playBarViewModel.getLineLyric(pos);
                _lyricToolTip.text = !!lineLyric ? lineLyric : "暂无歌词";
                const showPos = pos * width;
                // 如果歌词提示框超出边界，调整位置
                if (showPos + _lyricToolTip.width > width - 10) {
                    _lyricToolTip.x = width - _lyricToolTip.width - 10;
                } else {
                    _lyricToolTip.x = showPos - _lyricToolTip.width / 2;
                }
            } else {
                _lyricToolTip.text = "";
            }
        }
    }

    Item {
        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            top: progressSlider.bottom
        }

        LeftArea {
            id: leftArea
            enabled: playBarViewModel.hasMusic
            height: parent.height
            anchors {
                left: parent.left
                leftMargin: 10
                right: controlArea.left
            }
        }

        ControlArea {
            id: controlArea
            anchors.centerIn: parent
            height: parent.height
            enabled: playBarViewModel.hasMusic
        }
        RightArea {
            id: rightArea
            anchors {
                right: parent.right
                left: controlArea.right
            }
            height: parent.height
        }
    }
}
